@include('Home.head')

<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="#">首页</a></li>
          <li><a href="#">我的购物车</a></li>
        </ol>
    </div>
    <div class="am-cf cart-panel">
    	<div class="cart-list-panel" style="border: none;box-shadow:none">
            <ul class="am-avg-sm-1 cart-panel-ul">
                <li v-for="val,index in goods">
                	<div class="imgpanel"><a href=""><img :src="val.img" class="am-img-responsive" style="width: 100%;height: 100%;"/></a></div>
                	<div class="infopanel">
                    	<h3 style="width: 170px;"><a href="#">@{{ val.goodsname }}</a></h3>
                        <!-- <p>品牌：新世界</p> -->
                        <p>价格：<span class="red2 bold">@{{ val.rulingprice }}</span> 元  X <input type="number" class="am-input-sm txt-qty"  v-model="val.number" v-on:change="numberCha(val.number)" value="" /></p>
                        <p>规格：@{{ val.specs }}</p>
                        <span>库存：<span class="red2 bold">@{{ val.total }}</span> 件</span>
                        <span class="am-fr" v-on:click="del(val.id,index)"><a class="am-badge am-badge-danger am-round">删除</a></span>
                    </div>
                </li>
                <span v-show="goods == ''"> 购物车！空空如也~ </span>
            </ul>
        </div>
    </div>
    <div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ total }}</span> 种商品 ，总数量：<span class="red2 bold" id="total_jifen">@{{ totalNumber }}</span> 个，总价：<span class="red2 bold" id="total_amount">@{{ totalPrice }}</span> 元</div>
    <div class="cart-tool">
    	<a class="am-btn am-btn-sm am-btn-success" onclick="javascript:history.back(-1);" style="border-radius: 50px;">
          <i class="am-icon-chevron-left"></i>
          返回
        </a>
        <a class="am-btn am-btn-sm am-btn-warning"  v-on:click="add()" style="border-radius: 50px;">
          <i class="am-icon-shopping-cart"></i>
          结账
        </a>
    </div>
   <footer data-am-widget="navbar" class="am-navbar am-cf sxy-footer" id="">
       <ul class="am-navbar-nav am-cf am-avg-sm-4">
           <li>
               <a href="/home/excellent/index" class="">
                <img src="http://qiniu.baoliy168.com/%E7%BB%84%203478%403x.png" alt="首页"/>
                   <span class="am-navbar-label">首页</span>
               </a>
           </li>
          <li>
              <a href="/home/agentBonus/index" class="">
               <img src="http://qiniu.baoliy168.com/%E7%BB%84%203477%403x.png" alt="分类" />
                  <span class="am-navbar-label">分类</span>
              </a>
          </li>
           <li>
               <a href="/home/member/shopcart" class="footer-active" >
   
                <img src="http://qiniu.baoliy168.com/%E7%BB%84%208116%403x.png" alt="购物车"/>
                   <span class="am-navbar-label">购物车</span>
               </a>
           </li>
           <li>
               <a href="/home/member/index" class="">
                <img src="http://qiniu.baoliy168.com/%E7%BB%84%203475%403x.png" alt="我的"/>
                   <span class="am-navbar-label">我的</span>
               </a>
           </li>
       </ul>
   </footer>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '购物车',
            goods: '',//商品
            total: 0,
            totalNumber: 0,
            totalPrice: 0,
        },
        methods: {
            initialize: function () {
                $.post("/home/member/mycart", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    if (res.code) {
                        app.goods = res.data.data;
                        app.total = res.data.total;
                        app.totalNumber = res.data.totalNumber;
                        app.totalPrice = res.data.totalPrice;
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
            //修改数量
            numberCha:function (number) {
                if(parseInt(number) < 0 || isNaN(parseInt(number))){
                    layer.msg('输入正确的数量');
                    return;
                }
                app.totalNumber = 0;
                app.totalPrice = 0;
                for (var i=0;i<app.goods.length;++i){
                    app.totalNumber += parseInt(app.goods[i].number)
                    app.totalPrice += parseFloat((parseInt(app.goods[i].number) *  parseFloat(app.goods[i].rulingprice)))
                }
            },
            //删除
            del:function (id,index) {
                $.post("/home/member/mycart", {'_token': '{{csrf_token()}}',class:'delete',id:id}, function (res) {
                    if (res.code) {
                        layer.msg(res.data,{icon:7});
                        app.goods.splice(index,1)
                        app.total = 0;
                        app.totalNumber = 0;
                        app.totalPrice = 0;
                        for (var i=0;i<app.goods.length;++i){
                            app.total += 1
                            app.totalNumber += parseInt(app.goods[i].number)
                            app.totalPrice += parseFloat((parseInt(app.goods[i].number) *  parseFloat(app.goods[i].rulingprice)))
                        }
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
            //生成订单
            add:function () {
                for (var i=0;i<app.goods.length;++i){
                    if(parseInt(app.goods[i].number) < app.goods[i].purchase_num || isNaN(parseInt(app.goods[i].number))){
                        layer.msg('输入正确的'+app.goods[i].goodsname+'数量');
                        return;
                        break;
                    }
                }
                $.post("/home/microShop/microorder",{'_token':'{{csrf_token()}}',class:'add',goods:app.goods
				},function (res) {
                    if(res.code){
                        layer.msg(res.data.data);
                        window.location.href="/home/orderpage?id="+res.data.id;
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    });
</script>
</html>
